<template>
	<view class="content">
	<tn-nav-bar fixed  :isBack="true" >
		同城地图		
	</tn-nav-bar>
	
		<menghnMap @regionchange="regionchange" @navigation="navigation" @markertaptap="markertaptap" @tapMap="tapMap"
			:markers="markers" :latitude="latitude" :longitude="longitude" :showOper="showOper"/>
			
			<view class="tn-flex tn-flex-row-between" style="bottom: 5px;position: fixed;width: 100%;">
			  <view class=" justify-content-item tn-margin-sm tn-text-center" @click="qiehuan()">
			    <tn-button shape="round" backgroundColor="tn-main-gradient-purple" padding="30rpx 30rpx" width="220rpx"  shadow fontBold >     
			      <text class="tn-color-white">{{title}}</text>
			      <text class="tn-icon-sequence tn-padding-left-xs tn-color-white"></text>
			    </tn-button>
			  </view>
			
			  <view class=" justify-content-item tn-margin-sm tn-text-center" @click="info">
			    <tn-button shape="round" backgroundColor="tn-main-gradient-purple" padding="30rpx 30rpx" width="220rpx"  shadow fontBold >     
			      <text class="tn-color-white">换一批</text>
			      <text class="tn-icon-refresh-simple tn-padding-left-xs tn-color-white"></text>
			    </tn-button>
			  </view>
			</view>
			
			
			
			
			
			
					<tn-popup v-model="userinfoshow" width="80%" height="40%" mode="bottom" 
						:borderRadius="30" :closeBtn="false" :maskCloseable="true" @close="closedPopup">
						<view class="bottom-emoji tn-margin ">
							<view class="about__wrap">
								<!-- 头像用户信息 -->
								<view
									class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
									<view
										@click="navigateToFn({ url: '/circleMixinPages/blogger_other?id='+userinfo.id, checkLogin: false })"
										class=" tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
									
										<tn-avatar class="" :src="userinfo.avatar" size="lg" shape="circle">
										</tn-avatar>	
									</view>
									<view class="tn-padding-right tn-padding-left-sm tn-margin-top-sm">
			
										<text class=" tn-text-bold"
											style="font-size: 14px;">{{userinfo.nickname}}</text>
										<text class="tn-icon-sex-female  tn-text-xl tn-text-bold"
											v-if="userinfo.sex==2"></text>
										<text class="tn-icon-sex-male   tn-text-xl tn-text-bold"
											v-if="userinfo.sex==1"></text>
										<text class="tn-icon-sex   tn-text-xl tn-text-bold"
											v-if="userinfo.sex==0"></text>
										<text class="dk-lv tn-main-gradient-indigo--light"
											v-if="userinfo.vip==0&&configInfo.is_lv">LV {{userinfo.lv}}</text>
										<text class="dk-vip tn-main-gradient-orangeyellow" v-if="userinfo.vip==1"><text
												class="tn-icon-vip tn-color-black"
												style="font-size: 14px;margin-left: -5px;"></text>VIP{{userinfo.vip_lv}}</text>
			
									</view>
									<view class="tn-padding-right tn-padding-top-xs tn-padding-left tn-text-ellipsis">
			
										<text v-if="userinfo.is_dav==1" class=" tn-icon-success-circle-fill "
											style="font-size: 14px;margin-right:10px;">
											<text class="  tn-text-bold" style="font-size:14px;margin-left: 5px;">
												{{userinfo.dav_name}}
											</text>
										</text>
										<text class=""
											style="font-size:12px;margin-right: 10px;">ID:{{userinfo.id}}
										</text>
										<tn-button v-if="userinfo.school_id" size="sm"  backgroundColor="tn-main-gradient-bluepurple--light" margin="2rpx 2rpx">
										来自:{{userinfo.school_title}}
										</tn-button>
			
									</view>
			
									<view class="tn-padding-right tn-padding-top-xs tn-padding-bottom-sm tn-padding-left-sm">
										<block v-for="(item,indexdd) in userinfo.medal_list" :key="indexdd">
											<tn-tag backgroundColor="tn-cool-bg-color-5" margin="10rpx 10rpx">
												{{item.title}}
											</tn-tag>
			
										</block>
									</view>
								</view>
			
								<view class="blogger-tips-data__info tn-flex">
									<view class="tn-flex-1 tn-padding-sm tn-margin-xs" >
										<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
											<view class="">
												<view class="tn-text-xl ">
													{{ $t.number.formatNumberAddPriceUnit(userinfo.guanzhu) }}
												</view>
											</view>
											<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
												<text class="tn-padding-left-xs "
													style="font-size: 12px;">关注</text>
											</view>
										</view>
									</view>
									<view class="tn-flex-1 tn-padding-sm tn-margin-xs" @click="tofans('fans')">
										<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
											<view class="">
												<view class="tn-text-xl ">
													{{ $t.number.formatNumberAddPriceUnit(userinfo.fansi) }}
												</view>
											</view>
											<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
			
												<text class="tn-padding-left-xs "
													style="font-size: 12px;">粉丝</text>
											</view>
										</view>
									</view>
									<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
										<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
											<view class="">
												<view class="tn-text-xl ">
													{{ $t.number.formatNumberAddPriceUnit(userinfo.zhan) }}
												</view>
											</view>
											<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
			
												<text class="  " style="font-size: 12px;">获赞</text>
											</view>
										</view>
									</view>
								</view>
								<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
									<view @click="navigateToFn({ url: '/circleMixinPages/blogger_other?id='+userinfo.id, checkLogin: false })"
										style="width: 90%;padding: 8px 10px;height: 35px;"
										class="tn-main-gradient-purple justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-round tn-shadow-blur">
										去主页</view>			
								</view>
							</view>
						</view>
			
					</tn-popup>
			
			
			
			
			
	</view>
</template>

<script>
			import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import menghnMap from '@/friendMixinPages/menghn-map/menghn-map'
	export default {
			mixins: [template_page_mixin],
		components: {
			menghnMap
		},
		data() {
			return {
				userinfoshow:false,
				userinfo:[],
				body:[],
				quyu:'仅限本校',			
				tid:0,			
				title:'不限男女',
				latitude: 0,
				longitude:0,
				scrollTimer: null,
				showOper:false,
				markers: [],
			}
		},
		onLoad() {
		this.dingwei()
		},
		methods: {
			closedPopup() {
				this.userinfoshow = false
			},
			dingwei() {
				let that = this
				// #ifdef MP			
				wx.authorize({
					scope: 'scope.userFuzzyLocation',
					success(res) {
						console.log(res)
						if (res.errMsg == 'authorize:ok') {
							wx.getFuzzyLocation({
								type: 'wgs84',
								success(res) {
									uni.setStorageSync('latlng', res)
									that.info();
								},
								fail(err) {
									that.info();
									console.log(err)
								}
							})
						}
					},
					fail(err) {
						console.log(err)
					}
				})
				// #endif				
				// #ifndef MP
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {				
					uni.setStorageSync('latlng', res)
					that.info();
					},
					fail: function(res) {
				
						console.log(res)
					}
				});
		
				// #endif
			},
			
			async info() {
				
				this.latitude=uni.getStorageSync('latlng').latitude
				this.longitude=uni.getStorageSync('latlng').longitude
				
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/index/mapfriend',
					data: {	
						school_id:uni.getStorageSync('city_id'),
						latitude: uni.getStorageSync('latlng').latitude,
						longitude: uni.getStorageSync('latlng').longitude,
						tid:this.tid,
						quyu:this.quyu
					}
				});
			
				if (result.statusCode == 200) {
					that.markers = result.data.data.data					
				}
			},
			quyuqiehuan(){
				if (this.quyu=='仅限本校'){
					this.quyu='全部学校'
				}else{
					this.quyu='仅限本校'
				}
				this.info();
			},
			qiehuan(){	
				let that=this
		
				if (this.tid==0){
					this.title='只选女生'
					this.tid=2
						that.info();
				      return
				}
				if (this.tid==2){
					this.title='只选男生'
					this.tid=1
						that.info();
					return
				}
				if (this.tid==1){
					this.title='不限男女'
					this.tid=0
						that.info();
					return
				}
	
			},
			
			
			regionchange(e) {//移动地图触发
			if (this.scrollTimer != null) {//节流
				clearTimeout(this.scrollTimer);
			}
			this.scrollTimer = setTimeout(() => {
				if (e.type == 'end' && e.causedBy == 'drag') {
				console.log('地图移动了');
				}
			}, 500)
			},
			
			markertaptap(e) {				
				this.showinfo(e.detail.markerId)				
			},
			tapMap(e) {//点击地图触发
				
			},
			
			
			
			async showinfo(id) {
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/index/GetUser',
					data: {
						user_id: id
					}
				});
			
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						that.userinfoshow = true
						that.userinfo = result.data.data.userinfo;
			
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},
			
			
			
			
			

		}
	}
</script>

<style scoped>
	.delShow{
		position: absolute;
		top: ;
	}
	
</style>
